@import '../values';

.el-menu {
  display: flex;
  flex-wrap: wrap;

  .el-menu-item .el-badge__content {
    margin-left: .3125rem;
    vertical-align: unset;
  }

  &.inherit-bg-color,
  &.inherit-bg-color .el-menu-item.is-active,
  &.inherit-bg-color .el-menu-item:hover { background-color: inherit; }

  &.deep-color .el-menu-item.is-active {
    color: #2e2e2e;
    font-weight: 600;
    border-bottom: 2px solid #4f4f4f;
  }

  &.a-link-item .el-menu-item { // a-link-item 之下的所有 el-menu-item 中包裹都是 router-link
    display: flex;
    padding: 0 !important;
    >a {
      flex: 1; // 不用height：100%而是用flex是因为会挤压
      display: flex;
      align-items: center;
      padding: 0 1.25rem;

      .item-count {
        line-height: initial; // 需要初始化行高，不然会继承
        padding-left: 4px;
        padding-right: 4px;
        border-radius: 160px;
        background-color: rgba(0, 0, 0, 0.08);
      }
    }
  }

  &.sidebar {
    border-right: none;
    @extend .inherit-bg-color;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: hidden;

    .el-menu-item.sidebar-item  {
      height: 2.75rem;
      line-height: 2.75rem;
      color: inherit;
      flex-shrink: 0;

      &.is-active {
        background-color: $sidebar-item-active;
        color: #2e2e2e;
        font-weight: 600;
        &:before {
          position: absolute;
          width: .25rem;
          height: 100%;
          content: '';
          background-color: #707070;
        }
      }
    }
  }

  &.issues .el-menu-item {
    height: 3.25rem;
    line-height: 3.25rem;
  }

  &.user-show {

    .el-menu-item {
      height: 2.75rem;
      line-height: 2.75rem;
    }
    &.a-link-item .el-menu-item>a { padding: 0 1rem; }
  }

  .controls-container { // 跟导航平行的一些操作按钮区域，通常时`新建xx`，或者`排序`、`搜索`之类的功能
    display: flex;
    flex-wrap: wrap;

    @media screen and (min-width: $sm) {
      >:not(:last-child) { margin-right: 0.625rem; }

      position: absolute;
      top: 0; bottom: 0; right: 0;
      display: flex;
      align-items: center;
    }

    @media screen and (max-width: $sm) {
      >:first-child { margin-top: 0.5rem; }
      >:not(:last-child) { margin-bottom: 0.5rem; }
      flex: 0 0 100%;
      order: -1;

      .controls-child { flex: 0 0 100%; }
    }
  }

  .control-items {
    display: flex;

    @media screen and (min-width: $sm) {
      margin-left: auto;
      align-items: center;

      >.control-item {
        margin: 0 0 0 .625rem;
      }
    }

    @media screen and (max-width: $sm) {
      order: -1;
      width: 100%;
      flex-wrap: wrap;

      >.control-item {
        width: 100%;
        margin: .5rem 0 0;
      }
    }
  }
}
